<template>
    <div class="list-contain">
    <filterbar @range-result="handleRange" :pid="categoryId" @filter-result="handleFilter" @order-result="handleGoodsSort"></filterbar>
    <ul class="goods-list" :class="range===1? 'list-double': ''">
        <van-pull-refresh v-model="isDownLoading" @refresh="onRefresh">
            <van-list
                v-model="isUploading"
                :finished="finished"
                :finished-text="finished_text"
                @load="onLoad"
                :offset="10"
            >
            <li class="goods-list-item" v-for="val in list" @click="handleDetail(val.id, 0)">
                <div class="goods-list-item__thumb">
                    <img v-lazy="imageShow(val.primary_pic_url)" />
                </div>
                <div class="goods-list-item__content">
                    <div class="title">{{ val.name }}</div>
                    <div class="discount">
                        <img :src="sendBdcUrl" />
                    </div>
                    <div class="price">￥{{ val.retail_price }}</div>
                    <div class="salse">
                        <div class="salse-left">
                        <span><del>￥{{ val.market_price }}</del></span>
                        <span class="tag">包邮</span>
                        </div>
                        <span>已售{{ val.sell_volume ? val.sell_volume : 0 }}件</span>
                    </div>
                </div>
            </li>
          </van-list>
        </van-pull-refresh>  
    </ul>
  </div>
</template>

<script>
import filterbar from "@/components/filterbar";
import { autoLogin } from "@/utils";
import { getGoodsList } from "@/api/goods";

export default {
    name: "list",
    components: { filterbar },
    data() {
        return {
            categoryId: '',
            sendBdcUrl: "https://images.bdchats.com/prod/upload/product_discount.png",
            range: 1,
            isDownLoading: false,
            isUploading: false,
            finished: false,
            finished_text: "没有更多了",
            list: [],
            totalPages: 1,
            isFirst: true,
            query: {
                page: 0,
                limit: 10,
                cIds: '',
                minPrice: '',
                maxPrice: '',
                sidx: "id",
                order:'desc',
            },
        };
    },
    created() {
        autoLogin();
        this.categoryId = sessionStorage.getItem('categoryId') ? sessionStorage.getItem('categoryId') : ''
        this.query.cIds = this.categoryId 
    },
    methods: {
        imageShow(src) {
            const img = {};
            img.loading = require("@/assets/images/loading.gif");
            img.src = src;
            return img;
        },
        async getList() {
            await getGoodsList(this.query).then(response => {
                if (this.isFirst) {
                    this.isFirst = false;
                    this.totalPages = response.data.pageUtil.totalPage;
                }
                if (this.list.length) {
                    if (this.isUploading) {
                        //上拉加载
                        for (const item of response.data.pageUtil.list) {
                            this.list.push(item);
                        }
                        this.$nextTick(() => {
                            this.isUploading = false;
                        });
                        if (this.list.length >= response.data.pageUtil.totalCount) {
                            this.finished = true;
                        }
                    }

                    if (this.isDownLoading) {
                        //关闭下拉刷新
                        this.isDownLoading = false;
                        this.list = [];
                        for (const item of response.data.pageUtil.list) {
                            this.list.push(item);
                        }
                        if (this.finished) {
                            this.finished = false;
                        }
                    }
                } else {
                if (response.data.pageUtil.list) {
                    const dataList = response.data.pageUtil.list;
                    for (const item of dataList) {
                        this.list.push(item);
                    }
                    if (response.data.pageUtil.totalCount === 0) {
                        this.finished_text = "暂无数据";
                        this.finished = true;
                    }
                }
                this.isUploading = false;
                this.isDownLoading = false;
            }
      });
    },
        onLoad() {
            if(this.query.page < this.totalPages) {
                this.query.page = this.query.page + 1
                this.isUploading = true
                this.getList()
            }else{
                this.finished = true
                this.isDownLoading = false
                this.isUploading = false
            }
        },
        onRefresh() {
            this.finished = false;
            this.isUploading = false;
            this.totalPages = 0
            this.query.page = 1;
            this.list = []
            this.getList();
        },
        handleRange(range){
            this.range = range
        },
        handleFilter(data) {
            if(data) {
                this.list = []
                this.totalPages = 0
                this.query.page = 1
                this.query.minPrice = data.minPrice
                this.query.maxPrice = data.maxPrice
                this.query.cIds = data.cIds ? data.cIds : this.categoryId 
                this.finished = false;
                this.isUploading = false;
                this.getList()
            
            }
        },
        handleGoodsSort(data) {
            if(data) {
                this.list = []
                this.totalPages = 0
                this.query.page = 1
                this.query.sidx = data.sidx
                this.query.order = data.sort
                this.finished = false;
                this.isUploading = false;
                this.getList()
            }
        }
    }
};
</script>
